<template>
	<view class="uesrPopupPage">
		<uni-popup ref="userPopup" :is-mask-click="true">
			<view class="popup-content">
				<view class="userPopupPage">
					<view class="popupHead">
						<view @click="closePopup" style="color: rgba(6, 85, 255, 0.6);" v-if="sayShow">知道了</view>
						<view @click="closePopup" style="color: rgba(174, 172, 172, 0.6);" v-if="!sayShow">返回</view>
						<view @click="surePopup" style="color: rgba(21, 230, 154, 0.8);" v-if="sayShow">没问题</view>
						<view @click="surePopup" style="color: rgba(174, 172, 172, 0.6);" v-if="!sayShow">取消</view>
					</view>
					<view class="popupContent">
						<view class="userContent" v-if="sayShow">
							<view class="userTitle">关于账单</view>
							<view class="userSmallTitle">记账功能</view>
							<view class="userText">
								方法一&nbsp;&nbsp;首页点击悬浮按钮 - 点击"账"按钮 - 进入记账页面<br>
								方法二&nbsp;&nbsp;"我的"页 - 推荐功能 - 记账功能 - 进入记账页面<br>
							</view>
							<view class="userSmallTitle">账单类型管理</view>
							<view class="userText">
								方法一&nbsp;&nbsp;首页点击左上角"+"按钮 - 点击账单类型管理 - 进入账单类型管理页面<br>
								方法二&nbsp;&nbsp;"我的"页 - 推荐功能 - 点击账单类型管理 - 进入账单类型管理页面<br>
								方法三&nbsp;&nbsp;进入记账页面 - 点击账单类型选择"+"按钮 - 进入账单类型管理页面<br>
							</view>
							<view class="userSmallTitle">账单管理</view>
							<view class="userText">
								方法一&nbsp;&nbsp;首页点击左上角"+"按钮 - 点击账单管理 - 进入账单管理页面<br>
								方法二&nbsp;&nbsp;"我的"页 - 推荐功能 - 点击账单管理 - 进入账单管理页面<br>
							</view>
							<view class="userSmallTitle">账单导出</view>
							<view class="userText">
								方法一&nbsp;&nbsp;首页点击左上角"+"按钮 - 点击账单导出 - 进入账单导出页面<br>
								方法二&nbsp;&nbsp;"我的"页 - 推荐功能 - 点击账单导出 - 进入账单导出页面<br>
							</view>
							<view class="userSmallTitle">账单统计</view>
							<view class="userText">
								方法一&nbsp;&nbsp;首页点击底部导航栏第三项 - 进入账单统计页面<br>
							</view>
							<view class="userSmallTitle">账单近期明细</view>
							<view class="userText">
								方法一&nbsp;&nbsp;首页点击右侧账单模块 - 进入账单近期明细页面<br>
								方法二&nbsp;&nbsp;首页点击底部导航栏第三项 - 进入账单统计页面 - 点击右上角近期明细 - 进入账单近期明细页面<br>
							</view>
							<view class="userTitle">关于记事</view>
							<view class="userSmallTitle">记事功能</view>
							<view class="userText">
								方法一&nbsp;&nbsp;首页点击悬浮按钮 - 点击"事"按钮 - 进入记事页面<br>
								方法二&nbsp;&nbsp;"我的"页 - 推荐功能 - 记事功能 - 进入记事页面<br>
							</view>
							<view class="userSmallTitle">事件详情</view>
							<view class="userText">
								方法一&nbsp;&nbsp;首页点击底部导航栏第二项 - 进入事件详情页面 - 点击事件 - 进入事件详情页面<br>
							</view>
							<view class="userSmallTitle">事件编辑功能</view>
							<view class="userText">
								方法一&nbsp;&nbsp;首页点击底部导航栏第二项 - 进入事件详情页面 - 右上角打开编辑状态 - 点击置顶/删除/修改<br>
							</view>
							<view class="userTitle">关于天气</view>
							<view class="userSmallTitle">切换天气地址</view>
							<view class="userText">
								方法一&nbsp;&nbsp;首页点击天气模块展开详细按钮 - 进入天气详细页面 - 点击地址 - 进入地址选择页面<br>
							</view>
							<view class="userTitle">注意事项</view>
							<view class="userSmallTitle">关于数据</view>
							<view class="userText">
								该小程序暂未具备恢复删除数据功能，数据丢失恢复操作正处于开发阶段，请勿删除小程序或清空小程序数据
							</view>
							<view class="userTitle"></view>
							<view class="userTitle"></view>
						</view>
						<view class="weContent" v-if="!sayShow">
							<view class="weStr">没有我们，只有我了~</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				sayShow: true
			}
		},
		methods:{
			openPopup(key){
				this.sayShow = key
				this.$refs.userPopup.open('bottom')
			},
			surePopup(){
				this.$refs.userPopup.close()
			},
			closePopup(){
				this.$refs.userPopup.close()
			},
			
		},
	}
</script>

<style>
	.uesrPopupPage{
		position: fixed;
		z-index: 9999999999;
	}
	
	.userPopupPage {
		width: 100%;
		background-color: #ffffff;
		border-radius: 16rpx 16rpx 0 0;
		box-sizing: border-box;
	}
	
	.userPopupPage .popupHead {
		height: 70rpx;
		width: 100%;
		border-bottom: 1rpx solid #efefef;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		box-sizing: border-box;
	}
	
	.userPopupPage .popupHead>view {
		/* width: 20%; */
		height: 70rpx;
		margin: 0 20rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		letter-spacing: 2rpx;
		box-sizing: border-box;
	}
	
	.userPopupPage .popupContent {
		width: 100%;
		/* height: 84vh; */
		box-sizing: border-box;
		background-color: rgba(245, 245, 245, 1);
		border-bottom: 1rpx solid #efefef;
	}
	
	.userContent {
		width: 750rpx;
		height: 84vh;
		overflow: auto;
		padding-top: 10rpx;
		box-sizing: border-box;
		background-color: #ffffff;
	}
	
	.userTitle{
		width: 750rpx;
		height: 60rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		font-weight: 500;
		box-sizing: border-box;
		padding-left: 10rpx;
		color: #171717;
	}
	
	.userSmallTitle{
		width: 750rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		padding-left: 30rpx;
		color: #797979;
		font-weight: 500;
	}
	
	.userText{
		width: 730rpx;
		line-height: 36rpx;
		font-size: 26rpx;
		box-sizing: border-box;
		padding-left: 50rpx;
		color: #888888;
	}
	
	.weContent{
		width: 750rpx;
		height: 30vh;
		overflow: auto;
		padding-top: 10rpx;
		box-sizing: border-box;
		background-color: #ffffff;
	}
	
	.weStr{
		width: 750rpx;
		line-height: 20vh;
		text-align: center;
		font-size: 28rpx;
		color: #c3c3c3;
	}
</style>
